<template>
	<view class="animated fadeIn faster common-bg">
		<view class="px-3 mb-4 pt-4 d-flex" @click="openExam()">
			<view class="exam-cat px-3 d-flex d-flex-middle">
				<text class="font-bold font30 mr-1">{{exam.category_info.category_name}}</text>
				<text class="iconfont icon-xiajiantou main-color font30"></text>
			</view>
		</view>
		<view class="px-3 mb-5">
			<view class="mb-1"><text class="color5c font24" @click="goUrl('/subPages/basic/basic')">练习进度</text></view>
			<progress :percent="exam.overall_progress.progress_percentage" activeColor="#3E8EFE" backgroundColor="#cccccc" border-radius="10" stroke-width="8" />
			<view class="text-right mt-2">
				<text class="color5c">总共{{exam.overall_progress.total_questions_count}}题 已做{{exam.overall_progress.practiced_questions_count}}题</text>
			</view>
		</view>
		<view class="px-3 mb-8">
			<view class="d-flex d-flex-between mb-3">
				<view class="e-box d-flex d-flex-column d-flex-between" @click="goExam('/subPages/daily/daily')">
					<view class="color5c font32">章节练习</view>
					<view>
						<view class="d-flex d-flex-between d-flex-middle color5c font24 mb-1">
							<text>正确率</text>
							<text>{{exam.daily_practice.accuracy}}%</text>
						</view>
						<progress :percent="exam.daily_practice.accuracy" activeColor="#3E8EFE" backgroundColor="#cccccc" border-radius="30" stroke-width="5" />
					</view>
					<view>
						<view class="d-flex d-flex-between d-flex-middle color5c font24 mb-1">
							<text>完成度</text>
							<text>{{exam.daily_practice.completion_rate}}%</text>
						</view>
						<progress :percent="exam.daily_practice.completion_rate" activeColor="#3E8EFE" backgroundColor="#cccccc" border-radius="30" stroke-width="5" />
					</view>
				</view>
				<view class="e-box d-flex d-flex-column d-flex-between" style="width:308rpx;padding-right: 0;" v-if="exam.periodic_exam && exam.periodic_exam.start_time" @click="goPeriod(exam.periodic_exam.status)">
					<view class="color5c font32">定期考试</view>
					<view class="color5c">开放时间：</view>
					<view class="color5c font24" v-if="exam.periodic_exam.start_time">{{exam.periodic_exam.start_time.substring(0, 10)}}-{{exam.periodic_exam.end_time.substring(0, 10)}}</view>
					
					<view class="d-flex d-flex-middle" v-if="exam.periodic_exam.status == 2">
						<text class="color5c">考试：</text><text class="colorf00">进行中</text>
					</view>
					<view class="d-flex d-flex-middle" v-else-if="exam.periodic_exam.status == 1">
						<text class="color5c">距离开放：</text><text class="colorf00">{{exam.periodic_exam.time_value}}{{exam.periodic_exam.time_unit=='days'?'天': (exam.periodic_exam.time_unit == 'minutes' ? '分钟' : '小时')}}</text>
					</view>
					<view class="d-flex d-flex-middle" v-else>
						<text class="color5c">考试：</text><text class="colorf00">已结束</text>
					</view>
				</view>
				<view class="e-box d-flex d-flex-column d-flex-between" style="width:308rpx;padding-right: 0;" v-else @click="goPeriod(0)">
					<view class="color5c font32">定期考试</view>
					<view style="padding-bottom: 70rpx;">
						<text class="color999">暂无定期考试</text>
					</view>
				</view>
			</view>
			<view class="d-flex d-flex-between">
				<view class="e-box d-flex d-flex-column d-flex-between" @click="goExam('/subPages/chapter/chapter')">
					<view class="color5c font32">随机练习</view>
					<view>
						<view class="d-flex d-flex-between d-flex-middle color5c font24 mb-1">
							<text>正确率</text>
							<text>{{exam.random_practice.accuracy}}%</text>
						</view>
						<progress :percent="exam.random_practice.accuracy" activeColor="#3E8EFE" backgroundColor="#cccccc" border-radius="30" stroke-width="5" />
					</view>
					<view>
						<view class="d-flex d-flex-between d-flex-middle color5c font24 mb-1">
							<text>完成度</text>
							<text>{{exam.random_practice.completion_rate}}%</text>
						</view>
						<progress :percent="exam.random_practice.completion_rate" activeColor="#3E8EFE" backgroundColor="#cccccc" border-radius="30" stroke-width="5" />
					</view>
				</view>
				<view class="e-box d-flex d-flex-column" @click="goExam('/subPages/actual/actual')">
					<view class="color5c font32 mb-7">真题考试</view>
					<view>
						<view class="d-flex d-flex-between d-flex-middle color5c font24 mb-1">
							<text>完成度</text>
							<text>{{exam.exam_stats.completion_percentage}}%</text>
						</view>
						<progress :percent="exam.exam_stats.completion_percentage" activeColor="#3E8EFE" backgroundColor="#cccccc" border-radius="30" stroke-width="5" />
					</view>
				</view>
			</view>
		</view>
		<view class="px-3 pb-3">
			<view class="d-flex d-flex-between mb-4">
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" @click="goUrl('/subPages/errors/errors')">
					<image class="mb-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/e-01.png" style="width: 90rpx;height: 90rpx;"></image>
					<text class="color5c font26">错题集</text>
				</view>
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" @click="goUrl('/subPages/examHistory/examHistory')">
					<image class="mb-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/e-02.png" style="width: 90rpx;height: 90rpx;"></image>
					<text class="color5c font26">考试记录</text>
				</view>
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" @click="goUrl('/subPages/testList/testList')">
					<image class="mb-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/e-03.png" style="width: 90rpx;height: 90rpx;"></image>
					<text class="color5c font26">练习历史</text>
				</view>
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" @click="fav">
					<image class="mb-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/e-04.png" style="width: 90rpx;height: 90rpx;"></image>
					<text class="color5c font26">我的收藏</text>
				</view>
			</view>
			<view class="d-flex d-flex-between">
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" @click="goUrl('/subPages/examSet/examSet')">
					<image class="mb-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/e-07.png" style="width: 90rpx;height: 90rpx;"></image>
					<text class="color5c font26">题库设置</text>
				</view>
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" @click="goUrl('/subPages/myNote/myNote')">
					<image class="mb-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/e-06.png" style="width: 90rpx;height: 90rpx;"></image>
					<text class="color5c font26">我的笔记</text>
				</view>
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" @click="goUrl('/subPages/practiceRank/practiceRank')">
					<image class="mb-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/e-05.png" style="width: 90rpx;height: 90rpx;"></image>
					<text class="color5c font26">刷题榜</text>
				</view>
				<view class="d-flex d-flex-column d-flex-middle d-flex-center">
					<view style="width: 90rpx;"></view>
				</view>
			</view>
		</view>
		<uni-popup ref="popupLeft" type="left">
			<view class="popup-left">
				<view class="pt-4 pb-3 mb-2 shadow">
					<view class="d-flex d-flex-center mb-3">
						<text class="font-bold font36 main-color">切换题库</text>
					</view>
					<view class="d-flex">
						<view class="d-flex-item d-flex d-flex-center" @click="getIsAll">
							<text class="main-color" :class="{'font-bold':isOpen==false}">相关课题</text>
						</view>
						<view class="d-flex-item d-flex d-flex-center" @click="getIsOpen">
							<text class="main-color" :class="{'font-bold':isOpen}">我已开通</text>
						</view>
					</view>
				</view>
				
				<view class="p-2 d-flex d-flex-wrap">
					<view class="border-main bg-yellow-blue rounded50 d-flex d-flex-middle d-flex-center py-1 mb-2 mr-2" style="width: 230rpx;" v-for="topic in topicList" :key="topic.id" @click="kaitong(topic.id)">
						<text>{{topic.name}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { userApi } from '@/http/userApi.js'
	import store from '@/store/index.js'
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				topicList:[],
				isOpen:false,
				exam:{
					category_info:{
						category_id: '',
						category_name: "请选择",
						parent_category_name: "",
					},
					is_pay:false,
					daily_practice:{
						accuracy: 0,
						completion_rate: 0,
						correct_records: 0,
						distinct_questions: 0,
						total_records: 0,
					},
					exam_stats:{
						completed_exams: 0,
						completion_percentage: 0,
						total_exams: 1,
					},
					overall_progress:{
						practiced_questions_count: 0,
						progress_percentage: 0,
						total_questions_count: 0,
					},
					periodic_exam:null,
					random_practice:{
						accuracy: 0,
						completion_rate: 0,
						correct_records: 0,
						distinct_questions: 0,
						total_records: 0
					}
				}
			}
		},
		computed: {
		  ...mapState({
		    loginState: state => state.loginState,
		    cid: state => state.cid,
			school_id: state => state.school_id,
			major_id: state => state.major_id
		  }),
		},
		onReady() {
			let that = this
			setTimeout(()=>{
				if(!that.loginState){
					return uni.navigateTo({
						url:'/subPages/login/login'
					})
				}
				if(!that.school_id){
					that.showTis()
				}
			},1000)
		},
		onShow() {
			if(this.cid){
				this.getStatictis(this.cid)
			}else{
				let cid = uni.getStorageSync('topic_id')
				if(cid){
					store.commit('setCid', cid)
					this.getStatictis(cid)
				}
			}
		},
		methods: {
			getIsAll(){
				this.isOpen = false
				this.getAllTopic()
			},
			getIsOpen(){
				this.isOpen = true
				this.getIsOpenTopic()
			},
			getStatictis(cid){
				let that = this
				if(!that.loginState){
					return uni.showToast({
						title:'未登录，请先登录',
						icon:'none'
					})
				}
				userApi.staticTopic(cid).then((res)=>{
					that.exam = res
				})
			},
			getAllTopic(){
				let that = this
				uni.showLoading({
					title:'加载中...'
				})
				userApi.getAllTopic().then((res)=>{
					uni.hideLoading()
					that.topicList = res
				}).catch((e)=>{
					uni.hideLoading()
					console.log('exame-cate-e',e)
				})
			},
			getIsOpenTopic(){
				let that = this
				uni.showLoading({
					title:'加载中...'
				})
				userApi.getIsOpenTopic().then((res)=>{
					uni.hideLoading()
					that.topicList = res
				}).catch((e)=>{
					uni.hideLoading()
					console.log('is-open-topic',e)
				})
			},
			openExam(){
				let that = this
				if(that.loginState){
					that.$refs.popupLeft.open('left')
					if(that.topicList.length == 0){
						that.getAllTopic()
					}
				}else{
					uni.showToast({
						title: '未登录，请先登录！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/subPages/login/login'
						})
					}, 1500)
				}
			},
			goPeriod(bl){
				if(!this.loginState){
					return uni.showToast({
						title:'未登录，请先登录',
						icon:'none'
					})
				}
				if(!this.school_id){
					this.showTis()
					return
				}
				if(!this.exam.is_pay){
					let cate = this.exam.category_info
					return uni.navigateTo({
						url: `/subPages/kaitong/kaitong?cate=${encodeURIComponent(JSON.stringify(cate))}`
					})
				}
				if(bl>0){
					if(bl == 1){
						return uni.showToast({
							title:'定期考试未开始',
							icon:'none'
						})
					}
					if(bl == 3){
						return uni.showToast({
							title:'定期考试已结束',
							icon:'none'
						})
					}
					uni.navigateTo({
						url:'/subPages/evaluation/evaluation'
					})
				}else{
					uni.showToast({
						title:'暂无定期考试',
						icon:'none'
					})
				}
			},
			closeExam(){
				this.$refs.popupLeft.close()
			},
			getStatic(cid){
				userApi.staticTopic(cid).then((res)=>{
					console.log('staticTopic',res)
				}).catch((e)=>{
					
				})
			},
			goActual(){
				uni.navigateTo({
					url:'/subPages/actual/actual'
				})
			},
			goExam(pageUrl){
				if(!this.school_id){
					this.showTis()
					return
				}
				if(this.cid == ''){
					return uni.showToast({
						title:'请选择专业题库',
						icon:'none'
					})
				}
				if(!this.loginState){
					return uni.showToast({
						title:'未登录，请先登录',
						icon:'none'
					})
				}
				if(!this.exam.is_pay){
					let cate = this.exam.category_info
					return uni.navigateTo({
						url: `/subPages/kaitong/kaitong?cate=${encodeURIComponent(JSON.stringify(cate))}`
					})
				}
				uni.navigateTo({
					'url':pageUrl
				})
			},
			goUrl(pageUrl){
				if(this.loginState){
					uni.navigateTo({
						'url':pageUrl
					})
				}else{
					uni.showToast({
						title: '未登录，请先登录！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/subPages/login/login'
						})
					}, 1500)
				}
			},
			fav(){
				uni.navigateTo({
					url:'/subPages/fav/fav'
				})
			},
			kaitong(cid){
				let that = this
				uni.showLoading({
					title:'加载中...'
				})
				userApi.staticTopic(cid).then((res)=>{
					that.$refs.popupLeft.close()
					uni.hideLoading()
					uni.setStorageSync('topic_id',cid)
					store.commit('setCid', cid)
					that.exam = res
				}).catch((e)=>{
					uni.hideLoading()
				})
			},
			showTis(){
				uni.showModal({
					title:'提示',
					content:'请先设置学校和专业！',
					showCancel:false,
					confirmColor:'#007AFF',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url:'/subPages/basic/basic'
							})
						}
					}
				})
				
			},
			goChapter(){
				uni.navigateTo({
					url:'/subPages/chapter/chapter'
				})
				// uni.navigateTo({
				// 	url:'/subPages/chapter/chapter'
				// })
			}
		}
	}
</script>

<style scoped>
.exam-cat{
	background-color: rgba(62, 142, 254, 0.2);
	border: solid 1px #3E8EFE;
	border-radius: 60rpx;
	padding-top: 15rpx;
	padding-bottom: 15rpx;
}
.e-box{
	width: 268rpx;
	height: 210rpx;
	padding: 30rpx 40rpx 30rpx 20rpx;
	border: solid 1px #3E8EFE;
	border-radius: 14rpx;
	background-color: rgba(62, 142, 254, 0.2);
}
.popup-left{
	position: relative;
	width: 580rpx;
	min-height: 100vh;
	background-color: #fff;
}
.popup-more{
	position: absolute;
	background-color: #ffffff;
	padding: 20rpx 0 50rpx;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100001;
}
</style>
